<div id="loginDiv" class="animate form login_form">
    <section class="login_content">
        <form action="javascript:void(0);">
            <h1>Login Form</h1>
            <div>
                <input type="text" v-model="user.userName" class="form-control" placeholder="Username" required="" />
            </div>
            <div>
                <input
                        type="password"
                        v-model="user.password"
                        class="form-control"
                        placeholder="Password"
                        required=""
                />
            </div>
            <div>
                <input
                        class="form-control input-val"
                        type="text"
                        v-model="validateCode"
                        placeholder="请输入验证码（不区分大小写）"
                        style="float: left; width: 65%; margin-bottom: 0px"
                />
                <canvas id="canvas" @click="draw()" width="100" height="36"></canvas>
            </div>
            <div>
                <a @click="login()" class="btn btn-default submit" href="javascript:void(0);">Log in</a>
                <a class="reset_pass" href="#">Lost your password?</a>
            </div>

            <div class="clearfix"></div>

            <div class="separator">
                <p class="change_link">
                    New to site?
                    <a href="/register" class="to_register"> Create Account </a>
                </p>

                <div class="clearfix"></div>
                <br />

                <div>
                    <h1><i class="fa fa-paw"></i> SFAC</h1>
                    <p>Copyright © 2022 JiangHu. All rights reserved. 蜀ICP备 2021031966号-1</p>
                </div>
            </div>
        </form>
    </section>
</div>

<script>
    var loginVue = new Vue({
        el: "#loginDiv",
        data: {
            user: {
                userName: "",
                password: "",
            },
            show_num: [],
            validateCode: "",
        },
        methods: {
            login: function () {
                if (this.user.userName == "" || this.user.password == "") {
                    layer.msg("请输入用户名和密码!", { icon: 0 });
                    return;
                }

                // if (this.validateCode == "") {
                //     layer.msg("请输入验证码!", { icon: 0 });
                //     return;
                // }
                //
                // if (this.validateCode != this.show_num.join("")) {
                //     layer.msg("验证码错误!", { icon: 0 });
                //     return;
                // }

                var self = this;
                $.ajax({
                    url: "/api/login",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.user),
                    success: function (result) {
                        if (result.status == 500) {
                            layer.msg(result.message, { icon: 0 });
                        } else {
                            window.location.href = "/test/vueTest";
                        }
                    },
                    error: function (errorMsg) {
                        layer.msg(errorMsg.responseText, { icon: 0 });
                    },
                });
            },
            randomColor: function () {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            },
            draw: function () {
                var canvas_width = $("#canvas").width();
                var canvas_height = $("#canvas").height();
                var canvas = document.getElementById("canvas"); //获取到canvas的对象
                var context = canvas.getContext("2d"); //获取到canvas画图的环境
                canvas.width = canvas_width;
                canvas.height = canvas_height;
                var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                var aCode = sCode.split(",");
                var aLength = aCode.length; //获取到数组的长度

                for (var i = 0; i <= 3; i++) {
                    var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
                    var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
                    var txt = aCode[j]; //得到随机的一个内容
                    this.show_num[i] = txt.toLowerCase();
                    var x = 10 + i * 20; //文字在canvas上的x坐标
                    var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
                    context.font = "bold 23px 微软雅黑";

                    context.translate(x, y);
                    context.rotate(deg);

                    context.fillStyle = this.randomColor();
                    context.fillText(txt, 0, 0);

                    context.rotate(-deg);
                    context.translate(-x, -y);
                }
                for (var i = 0; i <= 5; i++) {
                    //验证码上显示线条
                    context.strokeStyle = this.randomColor();
                    context.beginPath();
                    context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.stroke();
                }
                for (var i = 0; i <= 30; i++) {
                    //验证码上显示小点
                    context.strokeStyle = this.randomColor();
                    context.beginPath();
                    var x = Math.random() * canvas_width;
                    var y = Math.random() * canvas_height;
                    context.moveTo(x, y);
                    context.lineTo(x + 1, y + 1);
                    context.stroke();
                }
            },
        },
        mounted() {
            this.draw();
        },
    });
</script>
